<!doctype html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Define custom form for recurring events</title>
</head>
<script src="../../codebase/dhtmlxscheduler.js?v=5.2.1" type="text/javascript" charset="utf-8"></script>
<script src="../../codebase/ext/dhtmlxscheduler_recurring.js?v=5.2.1" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="../../codebase/dhtmlxscheduler_material.css?v=5.2.1" type="text/css" charset="utf-8">

<style type="text/css" >
	html, body{
		margin:0px;
		padding:0px;
		height:100%;
		overflow:hidden;
	}
</style>


<script type="text/javascript" charset="utf-8">
	function init() {

		scheduler.config.prevent_cache = true;

		scheduler.config.details_on_create=true;
		scheduler.config.details_on_dblclick=true;
		scheduler.config.occurrence_timestamp_in_utc = true;
		scheduler.config.include_end_by = true;
		scheduler.config.repeat_precise = true;


		scheduler.config.lightbox.sections = [
			{name:"description", height:130, map_to:"text", type:"textarea" , focus:true},
			{name:"recurring", type:"recurring", map_to:"rec_type", button:"recurring", form:"recurring_form"},
			{name:"time", height:72, type:"time", map_to:"auto"}
		];

		scheduler.init('scheduler_here',new Date (2017,0,05),"month");

		scheduler.addEventNow({
			start_date: "05-02-2017 09:00",
			end_date:   "05-02-2017 15:00",
			text:   "Meeting"
		});
	}
</script>

<body onload="init();">
<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
	<div class="dhx_cal_navline">
		<div class="dhx_cal_prev_button">&nbsp;</div>
		<div class="dhx_cal_next_button">&nbsp;</div>
		<div class="dhx_cal_today_button"></div>
		<div class="dhx_cal_date"></div>
		<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
		<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
		<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
	</div>
	<div class="dhx_cal_header">
	</div>
	<div class="dhx_cal_data">
	</div>
</div>


<div class="dhx_form_repeat" id="recurring_form">
	<form>
		<div>
			<select name="repeat" style="margin-left:0;">
				<option value="day">Daily</option>
				<option value="week">Weekly</option>
			</select>
		</div>
		<div>
			<div style="display:none;" id="dhx_repeat_day">
				<input type="hidden" name="day_type" value="d"/>
				<input type="hidden" name="day_count" value="1" />
			</div>
			<div style="display:none;" id="dhx_repeat_week">
				Repeat every week next days:<br />

				<label><input type="checkbox" name="week_day" value="1" />Monday</label>
				<label><input type="checkbox" name="week_day" value="2" />Tuesday</label>
				<label><input type="checkbox" name="week_day" value="3" />Wednesday</label>
				<label><input type="checkbox" name="week_day" value="4" />Thursday</label>
				<label><input type="checkbox" name="week_day" value="5" />Friday</label>
				<label><input type="checkbox" name="week_day" value="6" />Saturday</label>
				<label><input type="checkbox" name="week_day" value="0" />Sunday</label>
				<input type="hidden" name="week_count" value="1" />
			</div>
		</div>

		<input type="hidden" value="no" name="end">
	</form>
</div>

</body>
